<template>
  <div>
    <!-- 文件信息-->
    <el-card style="height: 780px" v-loading="fileLoading">
      <div slot="header" class="search-header">
        <div class="show_title">文件列表：</div>
        <div class="flex-container"> <!-- 使用 Flexbox 布局 -->
          <el-input
            v-model="fileQueryParams.wenJianName"
            placeholder="搜索文件"
            clearable
            @keyup.enter.native="searchFile"
            class="my_input"
          />
          <div class="button-group">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFile">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetFile">重置</el-button>
          </div>
        </div>
      </div>
      <ul class="engs-container">
        <li v-for="file in fileList" :key="file.id">
              <span class="eng-row" @click="selectFile(file)" :class="{ selected: file === selectedWenJian }">
                <i class="folder-icon file-folder-icon"></i>
                <span class="folder-name">{{ file.wenJianName }}</span>
              </span>
        </li>
      </ul>
      <div class="pagination-container">
        <!-- 分页信息 -->
        <el-pagination
          @size-change="handleSizeChangeFile"
          @current-change="handleCurrentChangeFile"
          :current-page.sync="fileQueryParams.pageNum"
          :page-size.sync="fileQueryParams.pageSize"
          small
          layout="total, prev, pager, next, jumper"
          :total="fileTotal"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listFile} from "@/api/system/file_af";

export default {
  props: {
    selectedAnJuan: Object
  },
  data() {
    return {
      fileLoading: false,
      fileList: [], //文件列表
      fileTotal: 0, //文件总数
      selectedWenJian: null,
      fileQueryParams: {
        pageNum: 1,
        pageSize: 20,
        eaid: null,
        wenJianName:null
      },
    };
  },
  watch: {
    selectedAnJuan(newValue) {
      if (newValue != null) {
        this.fileQueryParams.eaid = newValue.id
        this.getFileList();
      }
    }
  },
  methods: {
    //获取文件信息
    getFileList() {
      this.fileLoading = true;
      listFile(this.fileQueryParams)
        .then((response) => {
          setTimeout(() => {
            this.fileList = response.rows;
            this.fileTotal = response.total;
            this.fileLoading = false;
          }, 300);
        })
        .catch((error) => {
          this.$message.error("获取文件信息失败:" + error);
          this.fileLoading = false;
        });
    },
    selectFile(file) {
      this.selectedWenJian = file;
      this.$emit('selectWenJian', file)
    },
    searchFile() {
      if (this.fileQueryParams.wenJianName === null) {
        this.$message("请输入文件名称")
      } else if (this.fileQueryParams.eaid === null){
        this.$message("请先选择案卷！")
      }
      else {
        this.fileQueryParams.pageNum = 1;
        this.$emit('clearPictureList'); // 向父组件传递清空 pictureList 的事件
        this.getFileList();
      }
    },
    resetFile() {
      this.fileQueryParams.wenJianName = null;
      if (this.fileQueryParams.eaid === null) {
        this.$message("请先选择案卷！")
      } else {
        this.$emit('resetFile',)
        this.getFileList();
      }
    },
    handleSizeChangeFile(pageSize) {
      this.fileQueryParams.pageSize = pageSize;
      this.getFileList();
    },
    handleCurrentChangeFile(currentPage) {
      this.fileQueryParams.pageNum = currentPage;
      this.getFileList();
    },
  },
};
</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  justify-content: space-between; /* 将内容分散对齐，使工程信息靠左，其他元素靠右 */
  align-items: center; /* 垂直居中对齐 */
}

.my_input {
  margin-left: auto;
  width: 38%;
}

.show_title {
  flex-grow: 1; /* 工程目录占据剩余空间，将其靠左 */
}

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.button-group {
  margin-left: 10px;
  display: flex;
  justify-content: center;
}

.engs-container {
  height: 600px;
  overflow-y: auto;
  padding: 10px;
  margin-top: -15px;
  border-radius: 4px;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.anjuan-row {
  margin-left: -12px;
  flex-basis: 100%;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  padding: 6px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.eng-row:hover {
  background-color: rgba(204, 232, 255, 0.5);
}

.anjuan-row:hover {
  background-color: rgba(204, 232, 255, 0.5);
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show_title {
  font-weight: bold;
  font-size: 20px;
  color: rgb(26, 115, 198);
}

/* 选中状态的样式 */
.selected {
  background-color: #cce8ff;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng.png");
}

.anJuan-folder-icon {
  background-image: url("~@/assets/icons/folder/anjuan.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file.png");
}

.picture-folder-icon {
  background-image: url("~@/assets/icons/folder/picture.png");
}
</style>
